
// 考试的时候可以有道翻译网页版(必须是网页版)搜报错和单词命名，不能百度搜报错，
// 富文本可以理解为超级文本
// v-html 他的作用就是解析富文本的
// 
import { Space, Table, Tag } from 'antd';
import React from 'react';
import { useEffect } from "react"
import * as action from "../../action"
import { useDispatch, useSelector } from "react-redux"
import { Pagination } from 'antd';
import {useState} from "react"
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: (text) => {
      return <a dangerouslySetInnerHTML={{ __html: text }}></a>

    }
  },
  {
    title: 'img',
    dataIndex: 'img',
    key: 'img',
    render: (text) => {
      return <img alt='' src={text}></img>

    }
  },
  {
    title: 'Age',
    dataIndex: 'date',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },

  {
    title: 'Action',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <a>Invite {record.name}</a>
        <a>Delete</a>
      </Space>
    ),
  },
];
const App = () => {
  let [currentPage,setCurrentPage] = useState(1)
  let [pageNum,setPageNum] = useState(10)
  let dispatch = useDispatch()
  let store = useSelector((state) => {
    return {
      ...state.tablereducer
    }
  })
  const changefn = (a,b)=>{
      console.log(a,b);
      setCurrentPage(a)
      setPageNum(b)
  }
  useEffect(() => {
    dispatch(action.getlist())
  }, [])
  const onShowSizeChange = (current, pageSize) => {
    console.log(current, pageSize);
  };
  return (
    <>
      <Table columns={columns} dataSource={store.arr.slice((currentPage-1 )* pageNum,currentPage*pageNum)} pagination={false} />
      <Pagination
        showSizeChanger
        onShowSizeChange={onShowSizeChange}
        defaultCurrent={1}
        total={store.arr.length}
        pageSizeOptions={[2, 5, 10, 20]}
        onChange = {changefn}

      />

    </>


  )
}




export default App;